import { useEffect, useState } from 'react'
import { fetchDetailAPI } from '@/apis/detail.ts'
import { DetailData } from '@/apis/detail'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

const Detail = () => {
  const [detail, setDetail] = useState<DetailData | null>(null)

  //route query
  const [params] = useSearchParams()
  const id = params.get('id')
  useEffect(() => {
    const getDetail = async () => {
      if (!id) return
      const res = await fetchDetailAPI(id)
      setDetail(res.data.data)
    }
    getDetail()
  }, [id])

  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }

  if (!detail) {
    return <div>loading...</div>
  }
  return (
    <div>
      <NavBar onBack={back}>{detail.title}</NavBar>
      <div dangerouslySetInnerHTML={{ __html: detail?.content }}></div>
    </div>
  )
}

export default Detail
